<template>
    <div class="box">
        <div class="top">
            <p class="title">年度游客量对比</p>
            <p class="bg"></p>
        </div>
        <div class="charts" ref="charts"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import * as echarts from 'echarts';
//获取图形图表节点
let charts = ref();
onMounted(() => {
    //初始化echarts实例
    let mycharts = echarts.init(charts.value);
    //设置配置项
    mycharts.setOption({
        title: {
            text: '散点图',
            left: "50%",//标题位置
            textStyle: {//主标题文字样式
                color: 'skyblue',
                fontSize: 20,
            }
        },
        //x|y轴组件
        xAxis: {
            type: 'category',//图形图表在x轴上均匀分布展示
            splitLine: {
                show: false // 移除 x 轴的网格线
            }
        },
        yAxis: {
            // show:false
            splitLine: {
                show: false // 移除 x 轴的网格线
            },
            //轴线设置
            axisLine:{
                show:true
            },
            //坐标轴刻度
            axisTick:{
                show:true
            },
        },
        //布局组件
        grid: {
            left: 20,
            right: 0,
            top: 40,
            bottom: 20,
            // borderWidth: 0  // 设置网格边框线宽度为0
        },
        series: [
            {
                type: 'scatter',
                data: [
                    [0, 33],
                    [1, 88],
                    [2, 21],
                    [3, 9],
                    [4, 88],
                    [5, 234],
                    [6, 113],
                    [7, 231],
                    [8, 674],
                    [9, 3],
                    [10, 88],
                    [11, 33],
                    [12, 21],
                    [13, 888],
                    [14, 332],
                    [15, 313],
                    [16, 123],
                    [17, 5],
                    [18, 657],
                    [19, 7]
                ],
                symbol: 'diamond',//菱形图标
                symbolSize: 15,
                label: {
                    show: true,
                    position: 'top',
                    //格式化散点图系列中标签（tooltip、axisLabel 等）显示的内容
                    // formatter: function (params: any) {
                    //     return params.value[1];//表示纵坐标值
                    // },
                    textStyle: {
                        fontFamily: 'Arial',
                        fontSize: 14,
                        fontWeight: 'bold',
                        color: 'rgb(220, 239, 181)'
                    }
                }
            }
        ]
    })
})

</script>

<style lang="scss" scoped>
.box {
    background: url(../../images/dataScreen-main-lb.png) no-repeat;
    background-size: 100% 100%;
    margin-top: 15px;

    .top {
        margin-left: 20px;

        .title {
            color: white;
            font-size: 20px;
        }

        .bg {
            width: 68px;
            height: 7px;
            background: url(../../images/dataScreen-title.png) no-repeat;
            background-size: 100% 100%;
            margin-top: 10px;
        }
    }

    .charts {
        height: 237px;
    }
}
</style>
